<style type="text/css">
  .user {
    position: relative;
  }
  .user-list {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    display: none;
    z-index: 10;
    max-height: 150px;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .user-list li {
    padding: .4em;
    border-bottom: 1px solid #e9e9e9;
  }
  .user-list li:last-of-type {
    border-bottom: none;
  }
  .user-list li:hover {
    background-color: #eee;
  }
  .user-list .user-name {
    font-weight: 500;
  }
  .user-list .user-email {
    float: right;
    font-size: .8em;
  }
</style>
<form action="" class="form-horizontal" role="form">

	<div class="form-group">
		<label class="col-sm-2 control-label">客户</label>
		<div class="col-sm-3">
			<input id="user-input" type="text" class="form-control" placeholder="" datatype="*" autocomplete="off"  value="{$dynaForm.customerEmail}"/>
			<input id="user-cid" type="hidden" name="cid" value="{$dynaForm.cid}"/>
			<ul class="user-list" id="user-list"></ul>
		</div>
	</div>
	
	<div class="form-group">
	    <label class="col-sm-2 control-label">表单名称</label>
	    <div class="col-sm-3">
	    	<input type="text" class="form-control" name="name" placeholder="" datatype="*" value="{$dynaForm.name}"/>
	    </div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">表单配置</label>
	    <div class="col-sm-3 radio">
	    	<textarea style="width:100%;height:200px;" class="form-control" name="config">{$dynaForm.config}</textarea>
	    </div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">提交按钮标题</label>
	    <div class="col-sm-3 radio">
	    	<input type="text" class="form-control" name="btn_title" placeholder="" datatype="*" value="{$dynaForm.btn_title}"/>
	    </div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">提交成功返回消息</label>
	    <div class="col-sm-3 radio">
	    	<input type="text" class="form-control" name="result_msg" placeholder="" datatype="*" value="{$dynaForm.result_msg}"/>
	    </div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-2 control-label">表单说明</label>
	    <div class="col-sm-3 radio">
	    	<textarea style="width:100%;height:200px;" class="form-control" name="description">{$dynaForm.description}</textarea>
	    </div>
	</div>
	
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
		    <input type="hidden" name="id" id="id" value="{$dynaForm.id}" />
			<button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/save">保存更改</button>
		</div>
	</div>
</form>

<script type="text/javascript">
// 选择用户
$( "#user-input" ).on( "keyup focus", function() {
  var v = $( this ).val();
  $.post( "__CONTROLLER__/getUserList", {"name": v}, function(data) {
    data.extra && showUserList( data.extra );
  });
});

$( "#user-input" ).on( "blur", function() {
  $( "#user-list" ).slideUp();
});

// 显示检索出的用户列表
function showUserList( userList ) {
  var html = "";
  for(var i = 0; item = userList[i]; i++) {
    html += "<li data-email='"+ item.email +"' data-cid='" + item.id + "'><span class='user-name'>" + item.name + "</span><i class='user-email'>" + item.email + "</i></li>";
  };
  $( "#user-list" ).html( html ).slideDown();
};

// 点击选择检索出的列表
$( "#user-list" ).delegate( "li", "click mouseover", function() {
  $( "#user-input" ).val( $(this).attr( "data-email" ) );
  $( "#user-cid" ).val( $(this).attr("data-cid") );
});
</script>